<template>
  <div style="width: 60%; margin: 20px auto; min-height: 600px">
    <div class="card" style="padding: 20px">
      <div style="margin-bottom: 5px;">
        <el-table :data="data.tableData" stripe>
          <el-table-column prop="userName" label="用户名称"></el-table-column>
          <el-table-column prop="applyUserName" label="申请用户名称"></el-table-column>
          <el-table-column prop="reasonText" label="申请理由" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="申请时间"></el-table-column>
          <el-table-column prop="status" label="申请状态"></el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template v-slot="scope">
              <el-button type="success"  @click="pass(scope.row.id)" :disabled="scope.row.status !== '申请中'">通过</el-button>
              <el-button type="danger"  @click="refuse(scope.row.id)" :disabled="scope.row.status !== '申请中'">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <div style="margin-top: 20px" v-if="data.total">
        <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue"
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  tableData: [],
  total: 0,
  pageNum: 1,  // 当前的页码
  pageSize: 5,  // 每页的个数
  formVisible: false,
  form: {},
  ids: [],
  userName: null,
  userList: [],
})

const loadUser = () => {
  request.get('/user/selectAll').then(res => {
    if (res.code === '200') {
      data.userList = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadUser()
// 加载表格数据
const load = () => {
  request.get('/friendApply/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      applyUserId: data.user.id
    }
  }).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data?.total
  })
}

// 更新
const update = () => {
  request.put('/friendApply/update', data.form).then(res => {
    if (res.code === '200') {
      data.formVisible = false
      ElMessage.success('操作成功')
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 删除
const del = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/friendApply/delete/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success('删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.error(err)
  })
}

// 点击通过
const pass = (id) => {
  ElMessageBox.confirm('您确定通过该好友申请吗?', '通过确认', { type: 'warning' }).then(res => {
    data.form.id = id
    data.form.status = '已通过'
    request.put('/friendApply/update', data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success('操作成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.error(err)
  })
}

// 点击拒绝
const refuse = (id) => {
  ElMessageBox.confirm('您确定拒绝该好友申请吗?', '拒绝确认', { type: 'warning' }).then(res => {
    data.form.id = id
    data.form.status = '已拒绝'
    request.put('/friendApply/update', data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success('操作成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.error(err)
  })
}

load()

</script>